<template>
  <div class="sidebar-container">
    <div class="user-avatar">
      <el-avatar :size="40" shape="square" :src="currnetAvatar" />
    </div>
    <div class="sidebar-nav">
      <div v-for="tab in tabs" :key="tab.id" class="nav-item" :class="{ active: activeTab == tab.id }"
        @click="selectTab(tab.id)">
        <el-badge v-if="tab.id == 'chat' && unreadCount > 0" :value="unreadCount">
          <SvgIcon :path="tab.icon" size="28" />
        </el-badge>
        <SvgIcon :path="tab.icon" size="28" />
      </div>
    </div>
    <div class="sidebar-footer">
      <el-tooltip content="退出" placement="top" effect="light">
        <el-icon @click="logout" size="28px" class="logout-icon">
          <SwitchButton />
        </el-icon>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import {
  ChatRound,
  User,
  SwitchButton,
  Tools,
  Orange
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { icons } from '@/assets/icons'
import SvgIcon from '@/components/SvgIcon.vue'

const router = useRouter()
const userStore = useUserStore()
const currnetAvatar = userStore.userInfo?.avatar

// props
const props = defineProps({
  unreadCount: {
    type: Number,
    default: 0
  },
  currentTab: {
    type: String,
    default: 'chat'
  }
})

// emit
const emit = defineEmits(['select-tab'])

// tabs 数据
const tabs = [
  { id: 'chat', icon: icons.chat, name: '聊天' },
  { id: 'contact', icon: icons.user, name: '联系人' },
  { id: 'group', icon: icons.group, name: '群组' },
  { id: 'set', icon: icons.tools, name: '设置' }
]

const activeTab = ref('chat')

// 监听props变化
watch(() => props.currentTab, (newVal) => {
  activeTab.value = newVal
})

// 方法
const selectTab = (tabId) => {
  activeTab.value = tabId
  emit('select-tab', tabId)
}

const logout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 占据整个视口高度 */
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.nav-item {
  padding: 15px 0;
  cursor: pointer;
  color: #fff;
}

.nav-item:hover {
  color: rgb(246, 211, 101);
}

.nav-item.active {
  color: #03fb7b;
}

.user-avatar {
  text-align: center;
  margin-top: 1rem;
}

.sidebar-footer {
  position: absolute;
  bottom: 10px;
  padding: 10px;
  text-align: center;
  width: 60px;
}

.logout-icon {
  color: #fff;
  cursor: pointer;
}
</style>